<template>
    <div class="serch_view">
        <form action="/" class="scale-1px-bottom">
            <van-search
                v-model="searchVal"
                placeholder="请输入客户名称/手机号"
                show-action
                background="#fff"
                @cancel="goback"
            >
            <i class="iconfont icon-sousuolan_sousuo" slot="left-icon"></i>
            </van-search>
        </form>
        <div class="list-continer">
            <van-list>
                <div v-for="(item,index) in costomList" :key="item.clientId">
                    <my-custom-item  :info="item" :num="index" :disabled="disabled" @click="itemClickHandler" @delete="itemDelete"></my-custom-item>
                </div>
            </van-list>
            <div v-if="!costomList.length && !loading" style="background: #fff;">
                <null :nullIcon="emptyData.nullIcon" :nullcontent="emptyData.nullcontent"></null>
            </div>
        </div>
    </div> 
</template>
<script>
import MyCustomItem from './components/MyCustomItem'
import Null from 'COMP/Null'
import { debounce, isEmpty } from 'lodash'
import CustomService from 'SERVICE/customService'
import { mapGetters } from 'vuex'
export default {
    data: () => ({
        costomList: [],
        loading: true,
        searchVal: '',
        scrollTop: 0,
        disabled: false,
        // emptyData: { nullcontent: '请在输入框输入进行搜索哦~~~', nullIcon: require('IMG/market/no_asking.png') }
        emptyData: { nullcontent: '未找到客户，快去分享你的名片吧!', nullIcon: require('IMG/user/empty_custom@2x.png') }
    }),
    components: {
        Null,
        MyCustomItem, 
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    mounted() {
        this.type = this.$route.query.type || 0
        this.disabled = !!this.type
        this.debounce = debounce(this.onLoad, 200, { 'maxWait': 500 })
        let cacheData = window.sessionStorage.getItem("cacheData")
        if (cacheData) {
            let parseData = JSON.parse(cacheData)
            let { costomList, searchVal, scrollTop } = parseData
            this.costomList = costomList
            this.searchVal = searchVal
            this.scrollTop = scrollTop
            window.sessionStorage.removeItem("cacheData")
        }
        this.$nextTick(() => {
            this.$el.querySelector('.list-continer').scrollTop = this.scrollTop
            this.$el.querySelector('input').focus()
        })
    },
    watch: {
        searchVal() {
            if (this.searchVal) {
                this.debounce()
            } else {
                this.costomList = []
                this.loading = true
                // this.emptyData = { nullcontent: '请在输入框输入进行搜索哦~~~', nullIcon: require('IMG/market/no_asking.png') }
            }
        }
    },
    methods:{
        //后退，取消
        goback () { 
            this.$router.go(-1)
            // this.$router.push({ name:"custom" })
        },
        async onLoad() {
            this.loading = true
            let obj = { current: 1, size: 100, type: this.type, searchName: this.searchVal }
            if (this.type) {
                obj.ifHome = 1
                obj.ifToday = 1
            }
            const result = await CustomService.getCustomerList(obj)
            this.costomList = result.records
            this.loading = false
            this.emptyData = { nullcontent: '未找到客户，快去分享你的名片吧!', nullIcon: require('IMG/user/empty_custom@2x.png') }
        },
        // 删除客户
        async itemDelete (index) {
            let item = this.costomList[index]
            let result = await CustomService.deleteCustomer({clientId: item.clientId, clientDelFlag: 2})
            this.costomList.splice(index, 1)
            this.$toast('删除成功！')
        },
        itemClickHandler(item) {
            this.scrollTop = this.$el.querySelector('.list-continer').scrollTop
            let cacheData = { costomList: this.costomList, searchVal: this.searchVal, scrollTop: this.scrollTop }
            window.sessionStorage.setItem("cacheData", JSON.stringify(cacheData))
            let query = ""
            if (item.clientStrangerFlag !== 2) {
                query = { thread: 'thread' }
            } else {
                query = { activityTrack: 'activityTrack' }
            }
            this.$router.push({ path: `/custom/${item.clientId}`, query })
        },
    }
}
</script>

<style lang="less" scoped>

/deep/ .van-search {
    padding: 10px 6px 10px 16px;;
    .van-cell {
        padding: 6px 10px;
        line-height: 24px;
        background: #F2F6F7;
        .van-field__left-icon {
            i {
                color: #969EA8;
            }
        }
    }
}

.serch_view { 
    background: #ffffff;
    .list-continer {
        // padding-left: 16px;
        background: #ffffff;
        height: calc(100% - 57px);
        overflow: auto;
    }
}
</style>
